<template>
  <el-dialog title="输入密码"
             :close-on-click-modal="false"
             :close-on-press-escape="false"
             :show-close="false"
             modal-append-to-body
             append-to-body
             width="500px"
             :visible.sync="box">
    <el-form :model="form"
             @submit.native.prevent>
      <el-form-item label=""
                    :label-width="0">
        <el-input :disabled="disabled"
                  v-model="password"
                  type="password"
                  placeholder="请输入密码">
        </el-input>
      </el-form-item>
    </el-form>
    <div slot="footer">
      <el-button type="primary"
                 :loading="disabled"
                 @click="handleLogin">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { mapState } from 'vuex'
export default {
  data () {
    return {
      password: '',
      form: {},
      disabled: false,
      flag: false,
      box: false,
    }
  },
  created () {
    this.password = this.pwd;
    if (this.validatenull(this.password)) {
      this.box = true;
    } else {
      this.flag = true;

    }
  },
  mounted () {
    if (this.flag) {
      this.$emit('submit');
    }

  },
  computed: {
    ...mapState(['pwd']),
  },
  methods: {
    handleLogin () {
      this.disabled = true;
      this.Bmob.User.login('smallwei', this.password).then(() => {
        this.disabled = false;
        this.$store.commit('setPwd', this.password)
        this.box = false;
        this.flag = true;
        this.$emit('submit');
      }).catch((error) => {
        this.$message.error(error.error)
        this.disabled = false;
      })
    },
  }
}
</script>

<style>
</style>
